<template>
<div class="swiper">
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in imgs" :key="index"><img :src="item.pic"></div>
    </div>
  </div>
</div>
  
</template>

<script>
import 'swiper/css/swiper.css'
import Swiper from 'swiper'
import {getBanner} from '../api/index'
export default {
  data() {
    return {
      imgs:[
        { pic: require("../assets/logo.png") }
      ]
    }
  },
  async mounted() {
      var mySwiper = new Swiper ('.swiper-container', {
          // direction: 'vertical', // 垂直切换选项
          loop: true,
          autoplay : true,
          speed : 1000,
          autoplay : {
          delay : 2000, //自动切换的时间间隔，单位ms
          disableOnInteraction : false //用户操作swiper之后，是否禁止autoplay
    },
          
      })

      
      // 请求banner图片
      let res = await getBanner()
      this.imgs = res.data.banners
      // console.log(res.data.banners);
      
  },
}
</script>
<style lang="less" scoped>
.swiper{
  width: 7.5rem;
    // 轮播图宽高
  .swiper-container {
      width: 7.1rem;
      height: 3rem;
      border-radius: 0.1rem;
      .swiper-pagination-bullet-active{
        background-color: orangered;
      }
      .swiper-slide img{
        width: 100%;
        height: 100%;
      }
  }
}

</style>